<template>
  <div class="abcd">
    <el-button type="plain" size="small" icon="el-icon-refresh" @click="init()"
      >刷新列表</el-button
    >

    <div
      class="common-list comp-clients"
      :class="{
        'comp-clients--depts': !role || role === 'holder' || role === 'officer',
      }"
      v-loading.fullscreen="loading"
    >
      <div
        class="deptss"
        v-if="!role || role === 'holder' || role === 'officer'"
      >
        <template v-for="dept1 in depts">
          <div
            class="dept dept--lv1"
            :key=""
            :class="{
              expanded: dept1.expanded,
              selected: dept1.id === filters.deptId,
            }"
          >
            <div class="expand" @click="expandDept(dept1)"></div>
            <div class="name">
              <div class="text">{{ dept1.name }}</div>
              <div class="flag" v-if="dept1.type">{{ dept1.typeText }}</div>
                <span
                style="margin-left: 0.5em; color: #999"
                v-if="dept1.type && dept1.province.id"
                >·</span
              >
              <span
                style="margin-left: 0.5em; color: #999"
                v-if="dept1.province.id"
                >{{
                  dept1.province.name + dept1.city.name + dept1.county.name
                }}</span
              >
            </div>
            <div class="btndept" style="margin-right: 215px; margin-top: 2px">
              <el-button size="mini" @click="opendig(dept1)"
                >添加下级部门</el-button
              >
            </div>
          </div>
          <template v-for="dept2 in dept1.depts">
          
            <div
              class="dept dept--lv2"
              :key=""
              :class="{
                expanded: dept2.expanded,
                selected: dept2.id === filters.deptId,
              }"
              v-if="dept1.expanded"
            >
              <div class="expand" @click="expandDept(dept2)"></div>
              <div class="name">
                <div class="text">{{ dept2.name }}</div>
                <div class="flag" v-if="dept2.type">{{ dept2.typeText }}</div>
                  
                <span
                  style="margin-left: 0.5em; color: #999"
                  v-if="dept2.type && dept2.province.id"
                  >·</span
                >
                <span v-if="dept2.province.id">
                    <span style="margin-left: 0.5em; color: #999" v-if="dept2.city.name">
                        <span v-if="dept2.county.name">{{ dept2.province.name + dept2.city.name +dept2.county.name }}</span>
                        <span v-else>{{ dept2.province.name + dept2.city.name }}</span>
                    </span>
                  
                    <span style="margin-left: 0.5em; color: #999" v-else>
                      <span v-if="dept2.city.id == ''">{{dept2.province.name}}</span>
                      <span v-else-if="dept2.county.id == ''">{{dept2.province.name + dept2.city}}</span>
                      <span v-else>{{dept2.province.name + dept2.city + dept2.county}}</span>

                    </span>
                </span>
              </div>
              <div class="btndept" style="margin-right: 40px; margin-top: 2px">
                <el-button size="mini" @click="opendig(dept2)"
                  >添加下级部门</el-button
                >
                <el-button type="primary" size="mini" @click="bianjidept(dept2)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="delDept(dept2)"
                  >删除部门</el-button
                >
              </div>
            </div>
            <template v-for="dept3 in dept2.depts">
              <div
                class="dept dept--lv3"
                :key=""
                :class="{
                  expanded: dept3.expanded,
                  selected: dept3.id === filters.deptId,
                }"
                v-if="dept1.expanded && dept2.expanded"
              >
                <div class="expand" @click="expandDept(dept3)"></div>
                <div class="name">
                  <!-- {{ dept3 }} -->
                  <div class="text">{{ dept3.name }}</div>
                  <div class="flag" v-if="dept3.type">{{ dept3.typeText }}</div>
                  
                    <span
                      style="margin-left: 0.5em; color: #999"
                      v-if="dept3.type && dept3.province.id"
                      >·</span
                    >
                    <span v-if="dept3.province.id">
                      <span style="margin-left: 0.5em; color: #999" v-if="dept3.city.name">
                          <span v-if="dept3.county.name">{{ dept3.province.name + dept3.city.name +dept3.county.name }}</span>
                          <span v-else>{{ dept3.province.name + dept3.city.name }}</span>
                      </span>
                    
                      <span style="margin-left: 0.5em; color: #999" v-else>
                        <span v-if="dept3.city.id == ''">{{dept3.province.name}}</span>
                        <span v-else-if="dept3.county.id == ''">{{dept3.province.name + dept3.city}}</span>
                        <span v-else>{{dept3.province.name + dept3.city + dept3.county}}</span>
  
                      </span>
                    </span>
                </div>
                <div
                  class="btndept"
                  style="margin-right: 40px; margin-top: 2px"
                >
                  <el-button size="mini" @click="opendig(dept3)"
                    >添加下级部门</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="bianjidept(dept3)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="delDept(dept3)"
                    >删除部门</el-button
                  >
                </div>
              </div>
              <template v-for="dept4 in dept3.depts">
                <div
                  class="dept dept--lv4"
                  :key=""
                  :class="{
                    expanded: dept4.expanded,
                    selected: dept4.id === filters.deptId,
                  }"
                  v-if="dept1.expanded && dept2.expanded && dept3.expanded"
                >
                  <div class="expand" @click="expandDept(dept4)"></div>
                  <div class="name" >
                    <div class="text">{{ dept4.name }}</div>
                    <div class="flag" v-if="dept4.type">
                      {{ dept4.typeText }}
                    </div>
                      <span
                        style="margin-left: 0.5em; color: #999"
                        v-if="dept4.type && dept4.province.id"
                        >·</span
                      >
                      <span v-if="dept4.province.id">
                          <span style="margin-left: 0.5em; color: #999" v-if="dept4.city.name">
                              <span v-if="dept4.county.name">{{ dept4.province.name + dept4.city.name +dept4.county.name }}</span>
                              <span v-else>{{ dept4.province.name + dept4.city.name }}</span>
                          </span>
                        
                          <span style="margin-left: 0.5em; color: #999" v-else>
                            <span v-if="dept4.city.id == ''">{{dept4.province.name}}</span>
                            <span v-else-if="dept4.county.id == ''">{{dept4.province.name + dept4.city}}</span>
                            <span v-else>{{dept4.province.name + dept4.city + dept4.county}}</span>

                          </span>
                      </span>
                  </div>
                  <div
                    class="btndept"
                    style="margin-right: 40px; margin-top: 2px"
                  >
                    <el-button size="mini" @click="opendig(dept4)"
                      >添加下级部门</el-button
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="bianjidept(dept4)"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      size="mini"
                      icon="el-icon-delete"
                      @click="delDept(dept4)"
                      >删除部门</el-button
                    >
                  </div>
                </div>
                <template v-for="dept5 in dept4.depts">
                  <div
                    class="dept dept--lv5"
                    :key=""
                    :class="{
                      expanded: dept5.expanded,
                      selected: dept5.id === filters.deptId,
                    }"
                    v-if="
                      dept1.expanded &&
                      dept2.expanded &&
                      dept3.expanded &&
                      dept4.expanded
                    "
                  >
                    <div class="expand" @click="expandDept(dept5)"></div>
                    <div class="name" >
                      <div class="text">{{ dept5.name }}</div>
                      <div class="flag" v-if="dept5.type">
                        {{ dept5.typeText }}
                      </div>
                        <span
                        style="margin-left: 0.5em; color: #999"
                        v-if="dept5.type && dept5.province.id"
                        >·</span
                      >
                        <span v-if="dept5.province.id">
                            <span style="margin-left: 0.5em; color: #999" v-if="dept5.city.name">
                                <span v-if="dept5.county.name">{{ dept5.province.name + dept5.city.name +dept5.county.name }}</span>
                                <span v-else>{{ dept5.province.name + dept5.city.name }}</span>
                            </span>
                          
                            <span style="margin-left: 0.5em; color: #999" v-else>
                              <span v-if="dept5.city.id == ''">{{dept5.province.name}}</span>
                              <span v-else-if="dept5.county.id == ''">{{dept5.province.name + dept5.city}}</span>
                              <span v-else>{{dept5.province.name + dept5.city + dept5.county}}</span>

                            </span>
                        </span>
                    </div>
                    <div
                      class="btndept"
                      style="margin-right: 40px; margin-top: 2px"
                    >
                      <el-button size="mini" @click="opendig(dept4)"
                        >添加下级部门</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="bianjidept(dept5)"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        @click="delDept(dept5)"
                        >删除部门</el-button
                      >
                    </div>
                  </div>
                </template>
              </template>
            </template>
          </template>
        </template>
      </div>

      <el-dialog
        title="添加部门"
        :visible.sync="open"
        width="400px"
        @close="closeDialog"
      >
        <el-form
          size="small"
          label-width="98px"
          @submit.native.prevent
          v-if="depdatas"
        >
          <el-form-item label="上级部门：" v-if="!editopen">
            <!-- <template v-if="env.debug"> -->
            <template>
              <el-tag
                style="margin: 0 10px 10px 0"
                disable-transitions
                v-if="depdatas.dept.id"
                >{{ depdatas.name }}</el-tag
              >
              <div v-if="depdatas.dept.id"></div>
              <el-button
                type="plain"
                icon="el-icon-plus"
                @click="setDept('pick-dept-start')"
                >{{ depdatas.dept.id ? "更换部门" : "选择部门" }}</el-button
              >
            </template>
          </el-form-item>
          <el-form-item label="部门名称：" required>
            <el-input
              ref="deptName"
              v-model="dept.name"
              style="width: 240px"
              placeholder="请输入"
              :maxlength="100"
              :readonly="loading"
              @change="setDept('validate')"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门类型：">
            <el-select
              v-model="dept.type"
              style="width: 240px"
              placeholder="请选择"
              clearable
              @change="setDept_name('Dept_type', $event)"
            >
              <el-option
                v-for="data in env.deptTypes"
                :key="data.id"
                :label="data.name"
                :value="data.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在地区：">
            <!-- <div>{{ depdatas.province }}</div> -->
            <el-select
              v-model="depdatas.province"
              style="margin-bottom: 10px; width: 240px"
              placeholder="省份"
              clearable
              @change="setDept('validate')"
            >
              <el-option
                v-for="data in provinces"
                :key="data.id"
                :label="data.name"
                :value="data.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="dept.city"
              style="margin-bottom: 10px; width: 240px"
              placeholder="城市"
              clearable
              @change="setDept('validate')"
            >
              <template v-for="data in citys">
                <el-option
                  :key="data.id"
                  :label="data.name"
                  :value="data.id"
                ></el-option>
              </template>
            </el-select>
            <el-select
              v-model="dept.county"
              style="width: 240px"
              placeholder="县区"
              clearable
              @change="setDept('validate')"
            >
              <template v-for="data in countys">
                <el-option
                  :key="data.id"
                  :label="data.name"
                  :value="data.id"
                  v-if="data.city.id === dept.city"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="排序值：">
            <el-input
              v-model="dept.sort"
              style="width: 160px"
              placeholder="请输入"
              :readonly="loading"
              @change="setDept('validate')"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-check"
              @click="setDept('submit', depdatas)"
              >{{ dept.id ? "保存" : "添加" }}</el-button
            >
            <el-button type="plain" icon="el-icon-close" @click="setDept('end')"
              >放弃</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog
        title="编辑部门"
        :visible.sync="bianjideptopen"
        width="400px"
        @close="closeDialog"
      >
        <el-form
          size="small"
          label-width="98px"
          @submit.native.prevent
          v-if="depdatas"
        >
          <el-form-item label="上级部门：" v-if="depdatas.level > 1">
            <template>
              <el-tag
                style="margin: 0 10px 10px 0"
                disable-transitions
                v-if="sjbm"
                >{{ sjbm.name }}</el-tag
              >
              <el-tag
                style="margin: 0 10px 10px 0"
                disable-transitions
                v-else
                >{{ depdatas.dept.name }}</el-tag
              >

              <div v-if="depdatas.dept.id"></div>
              <el-button
                type="plain"
                icon="el-icon-plus"
                @click="setDept('pick-dept-start')"
                >{{ depdatas.dept.id ? "更换部门" : "选择部门" }}</el-button
              >
            </template>
          </el-form-item>
          <el-form-item label="部门名称：" required>
            <el-input
              ref="deptName"
              v-model="dept.name"
              style="width: 240px"
              placeholder="请输入"
              :maxlength="100"
              :readonly="loading"
              @change="setDept('validate')"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门类型：">
            <el-select
              v-model="dept.type"
              style="width: 240px"
              placeholder="请选择"
              clearable
              @change="setDept_name('Dept_type', $event)"
            >
              <el-option
                v-for="data in env.deptTypes"
                :key="data.id"
                :label="data.name"
                :value="data.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在地区：">
            <el-select
              v-model="dept.province"
              style="margin-bottom: 10px; width: 240px"
              placeholder="省份"
              clearable
              @change="setDept('validate')"
            >
              <el-option
                v-for="data in provinces"
                :key="data.id"
                :label="data.name"
                :value="data.id"
              ></el-option>
            </el-select>
            
            <el-select
              v-model="dept.city"
              style="margin-bottom: 10px; width: 240px"
              placeholder="城市"
              clearable
              @change="setDept('city')"
            >
              <template v-for="data in citys">
                <el-option
                  :key="data.id"
                  :label="data.name"
                  :value="data.id"
                ></el-option>
              </template>
            </el-select>

            <el-select
              v-model="dept.county"
              style="width: 240px"
              placeholder="县区"
              clearable
              @change="setDept('validate')"
            >
              <template v-for="data in countys">
                <el-option
                  :key="data.id"
                  :label="data.name"
                  :value="data.id"
                  v-if="data.city.id === dept.city"
                ></el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="排序值：">
            <el-input
              v-model="dept.sort"
              style="width: 160px"
              placeholder="请输入"
              :readonly="loading"
              @change="setDept('validate')"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-check"
              @click="binajjisumbit('submit', depdatas)"
              >{{ "保存" }}</el-button
            >
            <el-button type="plain" icon="el-icon-close" @click="setDept('end')"
              >放弃</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="选择部门" :visible.sync="opendep" width="840px" v-if="opendep">
        <div style="height: 60vh; width: 800px" class="">
          <depts
            style="height: 100%"
            ref="deptPickerList"
            expanded
            @getsetletDept="getsetletDept"
            :getid="bmid"
          >
          </depts>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import { object, array, string, int, session, deepCopy } from "../util";
import depts from "../compents/depts.vue";
export default {
  name: "dep",
  mixins: [mixin],
  props: {
    role: { type: String, default: null },
    select: { type: Boolean, default: false },
    link: { type: Boolean, default: false },
  },
  data: () => ({
    loading: false,
    filters: {
      ids: null,
      number: null,
      name: null,
      sex: null,
      mobile: null,
      role: null,
      deptId: null,
      banned: null,
      flag: null,
      linage: 10,
      page: 1,
      total: 0,
    },
    list: [],
    
    bianjiid:null,
    selects: [],
    depts: [],
    num: null,
    open: false,
    opendep: false,
    abcopen:true,
    dept: {
     
    },
    depdatas: null,
    provinces: [],
    citys: [],
    countys: [],
    editopen: null,
    bianjideptopen: false,
    bmid: null,
    sjbm: null,
    deptCopy: null,
    deptsCopy: null,
    //部门名称
    Dept_name: null,
    //省名称
    provincename: null,
    //市名称
    cityname: null,
    cityid: null,
    //区名称
    countyname: null,
    countyid: null,
    addbumem:null
  }),
  components: {
    depts,
  },
  mounted() {
    this.init();
  },
  methods: {
    setDept_name(name, data) {
      let selectname = data === "office" ? "服务专员" : "职能部门";
      // console.log("selectname", selectname);
      this.Dept_name = selectname;
    },
    bianjidept(depdata) {

      console.log("depdata1===:", depdata);
      this.bmid = depdata;
      this.provinces = this.plugins.user.provinces;
      this.citys = this.plugins.user.citys;
      this.countys = this.plugins.user.countys;
      this.bianjideptopen = true;
        this.depdatas = deepCopy(depdata);
      this.dept = deepCopy(depdata);
      // this.dept.province = depdata.province;
      // this.dept.city = depdata.city.id;
      // this.dept.county = depdata.county.id;
      this.dept.province = depdata.province;
      // console.log(this.cityid);
      console.log(this.addbumem,depdata.name);
      if(this.abcopen){
       
            if(this.bianjiid == depdata.id){
              this.dept.city = this.cityid;
              this.dept.county = this.countyid;

            }else{
              if(this.addbumem == depdata.name){
                this.dept.city = this.cityid;
                this.dept.county = this.countyid;
              }else{
                this.dept.city= depdata.city.id;
                this.dept.county = depdata.county.id;
              }
              
            }
        
     
       

      }else{
        this.dept.city = this.cityid;
        this.dept.county = this.countyid;

      }
      this.deptCopy = JSON.parse(JSON.stringify(depdata));
    
      console.log(this.dept);
    },

    opendig(depdata) {
      console.log("depdata", depdata);
      this.depdatas = depdata;
      this.open = true;

      this.provinces = this.plugins.user.provinces;
      this.citys = this.plugins.user.citys;
      this.countys = this.plugins.user.countys;
    },
    closeDialog() {
      this.edit = null;
      this.dept = {};
      // this.cityid = null
      this.abcopen = true;
      this.sjbm = null;
    },

    setDept(action, data) {
      let form = this.dept;
      if (action === "pick-dept-start") {
        this.opendep = true;
      } else if (action === "validate") {
        
        // console.log("城市", this.citys);
        let error = "";
        form.name = string(form.name).trim();
        this.addbumem = string(form.name).trim();
        // form.province.id = string(() => provinces.find((province) => province.id === form.province.id).id);
        this.cityname = string(
          () => this.citys.find((city) => city.id === form.city)?.name
        );
        this.cityid = string(
          () => this.citys.find((city) => city.id === form.city)?.id
        );
        this.countyname = this.countys.find(
          (county) => county.id === form.county
        )?.name;
        this.countyid = this.countys.find(
          (county) => county.id === form.county
        )?.id;
        console.log(" this.cityid", this.cityid,this.countyid);
       
       
        error = error || (form.name ? "" : "请输入部门名称！");
        // form.sort = Math.max(int(form.sort), 0) || null;
        if (data) this.plugins.modal.toast(error, "error");
        return !error;
      } else if (action === "submit") {
        if (!this.setDept("validate", true)) return;

        form.parentId = data.id;
        form.level = data.level;
        form.province = 450000
        this.plugins.user.addDept(form).then((res) => {
          console.log(form);
           
          form.id = res.data;
          
          // console.log("res", res);
          this.loading = false;
          if (res.code === 0) {
            this.plugins.modal.toast("添加成功！", "success");
            this.open = false;
            form.dept = {
              id: data.id,
              name: data.name,
            }; // 父级id
            form.depts = [];
            form.province = {
              id: 450000,
              name: "广西壮族自治区",
            };
            form.city = {
              id: "",
              name: this.cityname,
            };
            form.county = {
              id: "",
              name: this.countyname,
            };
            form.typeText = this.Dept_name;
            // let b = this.depts[0].depts;
            this.jiexi2(this.depts, form);
            // console.log("this.depts", this.depts);
          } else {
            this.plugins.modal.alert(
              "添加失败",
              res.code + "：" + res.msg,
              "error"
            );
          }
        });
        
      } else if (action === "end") {
        this.bianjideptopen = false;
      } else if(action === "city"){
         this.dept.county = null 
      }
    },
    delDept(...depts) {
      if (this.loading) return;
      if (depts.length === 0)
        return this.plugins.modal.toast("请先勾选要删除的部门哦！", "warning");
      let content =
        " <span style='color:red;'>" +
        (depts.length > 1
          ? "勾选的" + depts.length + "个部门"
          : depts[0].name) +
        "</span> 吗？";
      this.plugins.modal
        .alert("删除确认", "确定删除" + content, "warning", [
          "确定删除",
          "再想想",
        ])
        .then((ok) => {
          if (!ok) return;
          this.loading = true;
          this.plugins.user.delDept(...depts.reverse()).then((res) => {
            this.loading = false;
            if (res.code === 0) {
              this.plugins.modal.toast("删除成功！", "success");
              this.init();
            } else {
              this.plugins.modal.alert(
                "删除失败",
                res.code + "：" + res.msg,
                "error"
              );
            }
          });
        });
    },
    binajjisumbit(action, data) {
      console.log(data);
      console.log();
      // console.log("data===:", data, "this.sjbm===:", this.sjbm);
      // console.log("this.depdatas.dept===:", this.depdatas.dept);
      let form = this.dept;
      if (this.sjbm) {
        let province = {
          id: 450000,
          name: "广西壮族自治区",
        };
        const { id, name } = this.sjbm;
        form.province.id = province.id;
        form.province.name = province.name;
        form.parentId = id;
        form.dept.id = id;
        form.dept.name = name;
      } else {
        form.parentId = this.depdatas.dept.id;
      }
      form.id = this.bmid.id;
      form.level = data.level;

      if (action === "submit") {
        if (!this.setDept("validate", true)) return;
        let province = {
          id: 450000,
          name: "广西壮族自治区",
        };
      console.log(this.dept);
      // form.province = province
        this.plugins.user
          .setDept({ ...form, province: province })
          .then((res) => {
            if (this.Dept_name) this.$set(form, "typeText", this.Dept_name);
            if (this.cityname) this.$set(form, "city", this.cityname);
            if (this.countyname) this.$set(form, "county", this.countyname);
           
            this.loading = false;
            if (res.code === 0) {
              this.plugins.modal.toast("保存成功！", "success");
              this.abcopen = false;
              this.bianjiid = form.id
              this.setDept("end");
              this.jiexi(this.depts, form);
              console.log(form);

            } else {
              this.plugins.modal.alert(
                "保存失败",
                res.code + "：" + res.msg,
                "error"
              );
            }
            
          });
      }
    },
    getsetletDept(infom) {
      this.sjbm = infom;
      this.opendep = false;
    },

    validate() {
      let filters = this.filters;
      filters.ids = null;
      filters.role = this.role || filters.role;
      filters.total = Math.max(int(filters.total), 0);
      filters.linage = Math.max(int(filters.linage), 1);
      filters.page = Math.max(
        Math.min(int(filters.page), Math.ceil(filters.total / filters.linage)),
        1
      );
      session(
        [this.env.key, this.$options.name, "filters", this.$route.fullPath],
        filters
      );
    },
    onTableSelectionChange(selects) {
      let weijiselects = selects.filter((item) => item.flag == "not");
      if (selects.length === 0) {
        this.filters.ids = null;
      }
      this.filters.ids = weijiselects.map((data) => data.id);
      this.selects = selects;
    },
    expandDept(dept) {
      if (dept.expanded) {
        dept.expanded = false;
      } else if (dept.loaded) {
        dept.expanded = true;
      } else {
        this.loading = true;
        this.plugins.user
          .getDepts({ deptId: dept.id, linage: 1000, page: 1 })
          .then((res) => {
            this.loading = false;
            if (res.code === 0) {
              dept.depts = res.data.list;
              dept.depts.forEach((item) => {
                item.dept.name = dept.name;
                item.level = dept.level + 1;
              });
              dept.depts.sort((a, b) => {
                let a1 = a.city.id;
                let a2 = a.county.id;
                let a3 = a.sort;
                let b1 = b.city.id;
                let b2 = b.county.id;
                let b3 = b.sort;
                return a1 === b1 ? (a2 === b2 ? b3 - a3 : a2 - b2) : a1 - b1;
              });
              dept.expanded = true;
              dept.loaded = true;
            } else {
              this.plugins.modal.toast(
                "加载失败<br>" + res.code + "：" + res.msg,
                "error"
              );
            }
          });
      }
    },
    selectDept(dept) {
      this.filters.deptId = this.filters.deptId === dept.id ? "" : dept.id;
      this.$emit("getsetletDept", dept);
    },
    jiexi(list, data) {
      const deptId = data.dept.id;
      for (let i in list) {
        // console.log("this.deptCopy.dept:", this.deptCopy.dept);
        if (this.deptCopy.dept.id != deptId) {
          if (deptId === list[i].id) {
            list[i].depts.push(data);
          }
        }
        if (list[i].id === data.id) {
          if (deptId && list[i].dept.id != deptId) {
            list.splice(i, 1);
          } else {
            list[i] = data;
            console.log(list[i]);
          }
          break;
        } else {
          if (list[i].expanded) {
            this.jiexi(list[i].depts, data);
          }
        }
      }
    },
    jiexi2(list, data) {
      // console.log("list", list);
      // console.log("jiexi2data", data);
      const deptId = data.parentId;
      for (let i in list) {
        if (deptId === list[i].id) {
          // console.log("data", data);

          list[i].depts.push(data);
        } else {
          if (list[i].expanded) {
            this.jiexi2(list[i].depts, data);
          }
        }
      }
    },
    init() {
      this.plugins.user
        .getDeptsother({ level: 1, linage: 1000, page: 1 })
        .then((res) => {
          this.loading = false;
          this.depts = [];
          this.selects = [];
          if (res.code === 0) {
            let data = res.data;
            this.depts = data.list.sort((a, b) => {
              let [a1, a2, a3] = [a.city.id, a.county.id, a.sort];
              let [b1, b2, b3] = [b.city.id, b.county.id, b.sort];
              return a1 === b1 ? (a2 === b2 ? b3 - a3 : a2 - b2) : a1 - b1;
            });
            this.deptsCopy = deepCopy(this.depts);
            this.validate();
          } else {
            this.validate();
            this.plugins.modal.toast(
              "列表加载失败<br>" + res.code + "：" + res.msg,
              "error"
            );
          }
        });
      // this.plugins.user.call(async () => {
      //     let length = this.depts.length;
      //     if (length === 0) this.depts = this.role && this.role === "staff" ? [] : await this.plugins.user.getDeptsother({ level: 1, linage: 1000, page: 1 }).then((res) => array(() => res.data.list).sort((a, b) => b.sort - a.sort));
      //     return { code: 0 };
      // }).then((res) => {
      //     this.loading = false;
      //     this.reset();
      // });
    },
  },
};
</script>

<style lang="scss">
.abcd {
  width: 100%;
  height: 70vh;
  .comp-clients {
    margin-top: 10px;
    height: 93%;
    overflow: hidden;
  }
  // .shua{
  //     position: absolute;

  // }
  .comp-clients--depts {
    padding-left: 302px;

    & > .deptss {
      position: absolute;
      top: 0;
      left: 0;
      border: solid 1px #ddd;
      width: 98%;
      height: calc(100% - 2px);
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
      }

      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #ddd;
      }

      & > .dept {
        display: flex;
        align-items: flex-start;
        border-bottom: dashed 1px #ddd;
        user-select: none;
        cursor: pointer;

        & > .expand {
          flex: 0 0 auto;
          padding: 6px;
          width: 20px;
          height: 20px;
          color: #aaa;
          font-size: 16px;
          line-height: 20px;
          text-align: center;
          user-select: none;
          cursor: pointer;

          &:before {
            content: "+";
          }
        }

        & > .name {
          flex: 1 1 0;
          display: flex;
          align-items: flex-start;
          padding: 7px 6px 7px 0;

          & > .text {
            flex: 0 1 auto;
            min-height: 18px;
            color: #333;
            font-size: 14px;
            line-height: 18px;
          }

          & > .flag {
            flex: 0 0 auto;
            margin-left: 0.5em;
            height: 18px;
            color: #999;
            font-size: 14px;
            line-height: 18px;
          }
        }

        &.expanded {
          & > .expand {
            &:before {
              content: "-";
            }
          }
        }

        &.selected {
          background-color: #d9e5f5;

          & > .name {
            color: #1677ff;
          }
        }
      }

      & > .dept--lv0 {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: white;

        & > .name {
          display: block;
          height: 18px;
          color: #333;
          font-size: 14px;
          font-weight: bold;
          line-height: 18px;
          text-align: center;
        }
      }

      & > .dept--lv1 {
        margin-left: 0;
        &:hover {
          background: rgb(244, 243, 245);
          & > .btndept {
            display: block;
          }
        }
        & > .btndept {
          display: none;
        }
      }

      & > .dept--lv2 {
        margin-left: 0;
        padding-left: 28px;
        &:hover {
          background: rgb(244, 243, 245);

          & > .btndept {
            display: block;
          }
        }
        & > .btndept {
          display: none;
        }
      }

      & > .dept--lv3 {
        margin-left: 0;

        padding-left: 56px;
        &:hover {
          background: rgb(244, 243, 245);

          & > .btndept {
            display: block;
          }
        }
        & > .btndept {
          display: none;
        }
      }

      & > .dept--lv4 {
        margin-left: 0;

        padding-left: 84px;
        &:hover {
          background: rgb(244, 243, 245);

          & > .btndept {
            display: block;
          }
        }
        & > .btndept {
          display: none;
        }
      }

      & > .dept--lv5 {
        margin-left: 0;

        padding-left: 112px;
        &:hover {
          background: rgb(244, 243, 245);

          & > .btndept {
            display: block;
          }
        }
        & > .btndept {
          display: none;
        }
      }
    }
  }
}
</style>
